import { Meta, Subtitle, Title, Canvas, Controls, Stories, Source } from "@storybook/blocks";
import * as BadgeStories from './Badge.stories'

<Meta of={BadgeStories} />

<Title />

<Subtitle />
[Component reference on primevue](https://primevue.org/badge/)

## Import

```ts
import Badge from "primevue/badge";
```

## Playground

<Canvas of={BadgeStories.Playground} sourceState="shown" />
<Controls of={BadgeStories.Playground} />

## How to use

To change the color of the badge, use the `severity` property.
While to change the size, use the `size` property.


<Stories title='' includePrimary={false} />

## Accessibility

### Screen Reader
Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic, `aria-live` may be utilized as well. In case badges need to be tabbable, `tabindex` can be added to implement custom key handlers.

### Keyboard Support
Component does not include any interactive elements.